﻿var TabsHandler_Instances = [];

function TabsHandler(id, cont) 
{
    this.id = id;
    this.tabs = [];
    this.count = 0;
    this.container = document.getElementById(cont);
    this.activeTab = -1;
    this.pathimages = "";
    
    this.addTab = TabsHandler_AddTab;
    this.showTab = TabsHandler_ShowTab;
    this.setTab = TabsHandler_SetTab;
    
    TabsHandler_Instances[id] = this;
}

function TabsHandler_AddTab(caption, contAsoc)
{
    this.showTab(caption, this.count);
    
    this.tabs[this.count] = document.getElementById(contAsoc);
    this.count++;
}

function TabsHandler_ShowTab(caption, index)
{
    var htmlTab = "";

    htmlTab += "<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" style=\"height:19px\">";
    htmlTab += "	<tr>";
    htmlTab += "		<td id=\""+this.id+"_"+index+"_left\" background=\"" + this.pathimages + "/tabLeft.gif\" width=\"16\" height=\"19\"></td>";
    htmlTab += "		<td id=\""+this.id+"_"+index+"_center\" height=\"19\" class=\"tabLink\" background=\"" + this.pathimages + "/tabCenter.gif\" nowrap>";
    htmlTab +=              "<a href=\"javascript:TabsHandler_ChangeTab('" + this.id + "', " + index + ")\">" + caption + "</a>";
    htmlTab += "	    </td>";
    htmlTab += "		<td id=\""+this.id+"_"+index+"_right\" background=\"" + this.pathimages + "/tabRight.gif\" width=\"16\" height=\"19\"></td>";
    htmlTab += "	</tr>";
    htmlTab += "</table>";

    var divTab = document.createElement('div');
    divTab.setAttribute("id", "tab_" + index);
    Common.setStyleAttribute(divTab, "float", "left");
    
    divTab.innerHTML = htmlTab;
    
    this.container.appendChild(divTab);
        
    // refresh
    this.container.innerHTML = this.container.innerHTML;
}

function TabsHandler_SetTab(index)
{
    if(this.activeTab==index)
        return;
        
    // cambio las imagenes del tab a activar
    var tabLeft = document.getElementById(this.id + "_" + index + "_left");
    var tabCenter = document.getElementById(this.id + "_" + index + "_center");
    var tabRight = document.getElementById(this.id + "_" + index + "_right");
    
    tabLeft.setAttribute("background", this.pathimages + "/tabLeftOn.gif");
    tabCenter.setAttribute("background", this.pathimages + "/tabCenterOn.gif");
    tabRight.setAttribute("background", this.pathimages + "/tabRightOn.gif");

    if(this.activeTab!=-1)
    {
        var activeCont = this.tabs[this.activeTab];
        activeCont.style.display = "none";
        
        // cambio las imagenes del tab activo        
        tabLeft = document.getElementById(this.id + "_" + this.activeTab + "_left");
        tabCenter = document.getElementById(this.id + "_" + this.activeTab + "_center");
        tabRight = document.getElementById(this.id + "_" + this.activeTab + "_right");
        
        tabLeft.setAttribute("background", this.pathimages + "/tabLeft.gif");
        tabCenter.setAttribute("background", this.pathimages + "/tabCenter.gif");
        tabRight.setAttribute("background", this.pathimages + "/tabRight.gif");        
    }

    var cont = this.tabs[index];
    cont.style.display = "";
    
    this.activeTab = index;
}

function TabsHandler_ChangeTab(id, index)
{
    var tHandler = TabsHandler_Instances[id];
    tHandler.setTab(index);
}